@section('title', '用户登录')
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <meta name="author" content="Yinni (1451171391@qq.com)">
  <meta name="description" content="江苏科技大学张家港校区/苏州理工学院-教职工荣誉信息管理系统">
  <title>@yield('title') - 教职工荣誉信息管理系统</title>

  <link href="{{asset(getThemeAssets('css/login.css'))}}" rel="stylesheet">
  <link href="{{asset(getThemeAssets('css/bootstrap.paper.min.css'))}}" rel="stylesheet">
  <link href="{{asset(getThemeAssets('css/app.css'))}}" rel="stylesheet">
    <style type="text/css">
        #form {
          padding-bottom: 104px;
        }
        #login-form {
          margin-left: 13%;
          margin-right: 13%;
        }
    </style>
  
</head>
<body>
  <div id="login-form">
    <div class="logo">
      <img id="logo" src="{{asset(getThemeAssets('img/logo2.png'))}}">
    </div>
    
    <div class="container-fluid" id="form">
      <div class="row text-center">
        <div class="col-sm-6 col-sm-offset-3">
          <h3>@yield('title')</h3>
        </div>
      </div>
      <div class="row">
        <div class="login-form">
          <form class="form-horizontal" method="post" action="{{ url('/login') }}">
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon">
                  <span class="glyphicon glyphicon-user"></span>
                </div>
                <input type="text" class="form-control" name="username"
                       autocomplete="off" value="{{ old('username') }}" placeholder="帐号" required>
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon">
                  <span class="glyphicon glyphicon-lock"></span>
                </div>
                <input type="password" class="form-control" name="password"
                       autocomplete="off" value="" placeholder="密码" required>
              </div>
            </div>
            <div class="form-group" id="btn-group">
              <div class="col-sm-11 col-sm-offset-1">
                {{ csrf_field() }}
                <div class="col-sm-6">
                    <button id="btn1" type="submit" class="btn btn-primary btn-block">登录</button>
                </div>
                <div class="col-sm-6">
                    <a href="{{ url('/register')}}">
                    <button type="button" class="btn btn-primary btn-block">注册新教职工信息</button>
                </a>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="row">
        <div class="text-center" id="footer">
            <p>江苏科技大学 | 苏州理工学院</p>
            <p>计算机协会</p>
            <p>Copyright © {{ date('Y') }} <b></b></p>
        </div>
      </div>
</div>
  
</body>
  <script src="{{asset(getThemeAssets('jquery/jquery-2.1.1.js', true))}}"></script>
  <script src="{{asset(getThemeAssets('bootstrap/js/bootstrap.min.js', true))}}"></script>
  <script>
  $(document).ready(function() {

  });
  // js正则验证表单，对失焦进行处理
  $('#username').blur(function(event) { 
        var username = $('#username').val();
        // console.log(username);    
        // js正则匹配6-10位字符
        var username_vali=/^[a-z]{6,10}/i;
        if (username.length == 0) {
          $('#error1').html('用户名不能为空！');
        } 
        else if (!username_vali.test(username)) {
          $('#error1').html('请输入6—10位英文字符！');
        } else {
          $('#error1').html('');
        }


  });
  $('#password').blur(function(event) {
      var password = $('#password').val();
      // console.log(password);  
      // js正则匹配6-10位0-9数字
      var password_vali=/^[0-9]{6,10}/;   
      if (password.length ==0 ) {
          $('#error2').html('密码不能为空');
      }else if(!password_vali.test(password)) {
          $('#error2').html('密码格式为6-10位0-9数字！')
      }else {
          $('#error2').html('');
      } 
  });
  </script>
</html>